<template>
	<div id="app">
		<!--应用程序栏-->
		<v-app-bar app color="#FF5252">
			<v-list-item-title style="text-align: center;font-size:18px;color:white">房屋详情</v-list-item-title>
			<v-btn elevation="0" small color="#FF5252" @click="goHouse()" class="go_back">
				<icon name="back" scale="2" color="white"></icon>
			</v-btn>
		</v-app-bar>
		<!-- 轮播图需要位置信息 -->
		<v-carousel hide-delimiter-background show-arrows-on-hover hide-delimiters='false' height="65vw">
			<v-carousel-item v-for="(item,i) in house_del.img_urls" :key="i" :src="item" reverse-transition="fade-transition"
				transition="fade-transition">
				<div class="tit">
					<!-- 需要渲染一下 -->
					<span>{{house_del.area_name}}</span> <br /><span>{{house_del.title}}</span>
				</div>
			</v-carousel-item>
		</v-carousel>
		<v-card class="mx-auto" style="width:100%;margin-top:10px" outlined>
			<v-list-item three-line style='max-height: 75px !important;min-height: 75px;'>
				<v-list-item-content style="width:100%;padding:10px 0;">
					<v-list-item-title class="headline mb-1" style="border-right: 1px solid #dddddd;margin-bottom: 0px !important;">
						<span style="color:#FF5252;font-size: 20px;">{{house_del.month_price}}</span><span style="color:#FF5252;font-size: 12px;">元/月</span></v-list-item-title>
					<v-list-item-subtitle style="border-right: 1px solid #dddddd"><span>{{house_del.lease_type}}</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{house_del.acreage}}m²</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{{house_del.renovation}}</span></v-list-item-subtitle>
				</v-list-item-content>

				<v-list-item-action v-if="house_del.collections==1">
					<!-- 将要触发接口 -->
					<div style="margin: 0 auto;text-align: center;" @click="collection()">
						<icon name="collected" scale="3"></icon>
						<v-list-item-subtitle>已收藏</v-list-item-subtitle>
					</div>
				</v-list-item-action>
				<v-list-item-action v-else>
					<!-- 将要触发接口 -->
					<div style="margin: 0 auto;text-align: center;" @click="collection()">
						<icon name="collection_white" scale="3"></icon>
						<v-list-item-subtitle>收藏</v-list-item-subtitle>
					</div>
				</v-list-item-action>

			</v-list-item>
		</v-card>

		<v-card class="mx-auto" style="width:100%;margin-top:10px" outlined>
			<v-list two-line subheader style="padding: 0;">
				<v-list-item class="list_item">
					<v-list-item-content>
						<v-list-item-title class="house_tit">房屋信息</v-list-item-title>
					</v-list-item-content>
				</v-list-item>
				<v-divider></v-divider>
			</v-list>
			<div class="service-list">
				<ul>
					<li>类型：{{house_del.house_type}}</li>
					<li>朝向：{{house_del.position}}</li>
					<li>楼层：暂无 </li>
					<li>装修：{{house_del.renovation}}</li>
					<li>现状：{{house_del.status}}</li>
					<li>可入住：{{house_del.see_house_date}}</li>
					<li>建造年代：{{house_del.build_date}}</li>
					<li>可看房：{{house_del.see_house_date}}</li>
				</ul>
				<div class="clearfloat"></div>
			</div>
		</v-card>

		<v-card class="mx-auto" style="width:100%;margin-top:10px" outlined>
			<v-list two-line subheader style="padding: 0;">
				<v-list-item class="list_item">
					<v-list-item-content>
						<v-list-item-title class="house_tit">配置设施</v-list-item-title>
					</v-list-item-content>
				</v-list-item>
				<v-divider></v-divider>
			</v-list>
			<div class="service-ties">
				<ul v-for="(facilities,i) in house_del.facilities" :key="i">
					<li v-if="facilities==1">
						<icon name="bed" scale="2"></icon>床
					</li>
					<li v-if="facilities==2">
						<icon name="bx" scale="2"></icon>冰箱
					</li>
					<li v-if="facilities==3">
						<icon name="cf" scale="2"></icon>厨房
					</li>
					<li v-if="facilities==4">
						<icon name="syj" scale="2"></icon>洗衣机
					</li>
					<li v-if="facilities==5">
						<icon name="desk" scale="2"></icon>书桌
					</li>
					<li v-if="facilities==6">
						<icon name="chair" scale="2"></icon>椅子
					</li>
					<li v-if="facilities==7">
						<icon name="kt" scale="2"></icon>空调
					</li>
					<li v-if="facilities==8">
						<icon name="wifi" scale="2"></icon>宽带
					</li>
					<li v-if="facilities==9">
						<icon name="tv" scale="2"></icon>电视
					</li>
					<li v-if="facilities==10">
						<icon name="yg" scale="2"></icon>衣柜
					</li>
					<li v-if="facilities==11">
						<icon name="dlwy" scale="2"></icon>独卫
					</li>
					<li v-if="facilities==12">
						<icon name="yt" scale="2"></icon>阳台
					</li>
				</ul>
				<div class="clear"></div>
				<div class="clearfloat"></div>
			</div>

		</v-card>

		<v-card class="mx-auto" style="width:100%;margin-top:10px" outlined>
			<v-list two-line subheader style="padding: 0;">
				<v-list-item class="list_item">
					<v-list-item-content>
						<v-list-item-title class="house_tit">房源描述</v-list-item-title>
					</v-list-item-content>
				</v-list-item>
				<v-divider></v-divider>
			</v-list>
			<div class="service-list">
				<p>
					{{house_del.house_del}}
				</p>
				<div class="clearfloat"></div>
			</div>
		</v-card>
		<v-card class="mx-auto" style="width:100%;margin-top:10px" outlined>
			<v-list two-line subheader style="padding: 0;">
				<v-list-item class="list_item">
					<v-list-item-content>
						<v-list-item-title class="house_tit">用户评价</v-list-item-title>
					</v-list-item-content>
				</v-list-item>
				<v-divider></v-divider>
			</v-list>
			<div class="service-list" v-if="house_del.comments.length!=0">
				<div v-for="(comment,i) in house_del.comments" :key="i">
					<p>
						{{comment.user_name}}：{{comment.comment}}
						<span style="float: right;">{{comment.ctime}}</span>
					</p>
				</div>
				<div class="clearfloat"></div>
			</div>
			<div class="service-list" v-if="house_del.comments.length==0">
					<p>
						暂无
					</p>
				<div class="clearfloat"></div>
			</div>
			
		</v-card>
		
		<!-- 预留空间给底部按钮 -->
		<div style="width:100%;height:40px;">
		</div>
		<!-- 绝对定位到底部进行弹窗显示 bottom: 0;left: 0;表示距离父级标签底部0px 和左部px-->
		<!-- <div class="bottom_button" @click="yuyue=true"> -->
			<!--预约看房-->
	<!-- 		<span style="line-height: 5vh">预约看房</span>
		</div> -->
		<v-btn block color="#FF5252" class="mr-4" @click="yuyue=true" style="font-size: 17px;color:white;	position: fixed;
		bottom: 0;left:0">
			预约看房
		</v-btn>
		<!-- 预约看房表单-->
		<el-dialog title="填写信息" :visible.sync="yuyue" width="80%" top="20vh">
			<div class="dialog_input">
				<el-input placeholder="您的姓名" v-model="name">
					<i slot="prefix" class="el-input__icon el-icon-user"></i>
				</el-input>
			</div>
			<div class="dialog_input">
				<el-input placeholder="您的手机号码" v-model="phone">
					<i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
				</el-input>
			</div>
			<div class="dialog_input">
				<el-date-picker :clearable="false" :picker-options="pickerOptions0" value-format="yyyy-MM-dd" v-model="see_house_date"
					type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
			</div>
			<div class="dialog_input">
				<el-button type="danger" style="width: 100%;" @click="reserveOrder()">立即预约</el-button>
			</div>
			<v-snackbar v-model="snackbarCheck" bottom :timeout="timeout">
				{{message_two}}
			</v-snackbar>
		</el-dialog>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		name: "HouseDetail",
		data() {
			return {
				itemImage: [
					require("../../../../static/index/pd-003.png"),
					require("../../../../static/index/pd-004.png"),
					require("../../../../static/index/pd-005.png"),
					require("../../../../static/index/pd-006.png")
				],
				yuyue: false,
				name: '',
				phone:'',
				see_house_date: '',
				current_uid: '',
				snackbar: false,
				snackbarCheck:false,
				message: '',
				message_two:'',
				timeout: 1000,
				house_del: [],
				is_collection: '',
				house_id: this.$route.query.house_id,
				pickerOptions0: {
					disabledDate: time => {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
			}
		},
		methods: {
			goHouse() {
				this.$router.go(-1)
			},
			collection() {
				let _this = this;
				console.log(this.house_id)
				axios
					.post("/api/v1.0/house/collection", {
						house_id: _this.house_id,
						is_collection: _this.is_collection
					})
					.then(function(response) {
						if (response.data.errno == '0') {
							console.log(response.data);
							_this.snackbar = true;
							_this.message = response.data.errmsg;
							setTimeout(function() {
								location.reload()
							}, 1000);
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						} else {
							console.log(response.data);
							_this.snackbar = true;
							_this.message = response.data.errmsg;
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			},
			reserveOrder() {
				let _this = this;
				const pattern_two = /^([\u4e00-\u9fa5]){2,7}$/;
				if(!pattern_two.test(this.name)){
					this.snackbarCheck = !this.snackbarCheck;
					this.message_two = "请输入正确的姓名";
					return
				}
				const pattern = /^1([345789][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
				if (!pattern.test(this.phone)) {
					this.snackbarCheck = !this.snackbarCheck;
					this.message_two = "手机号格式错误";
					return
				}
				if (this.see_house_date =='') {
					this.snackbarCheck = !this.snackbarCheck;
					this.message_two = "看房日期不能为空";
					return
				}
				axios
					.post("/api/v1.0/house/reserve_order", {
						house_id: _this.house_id,
						see_date:_this.see_house_date,
						name:_this.name,
						phone:_this.phone
					})
					.then(function(response) {
						if (response.data.errno == '0') {
							_this.snackbarCheck = true;
							_this.message_two = response.data.errmsg;
							setTimeout(function() {
								_this.yuyue = false;
							}, 1000);

						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							_this.snackbarCheck = true;
							_this.message_two = response.data.errmsg;
							setTimeout(function() {
								_this.$router.replace({
									path: "/login"
								});
							}, 1000);
						}
						else {
							_this.snackbarCheck = true;
							_this.message_two = response.data.errmsg;
						}
					})
					.catch(function() {
						_this.message_two = "连接服务器失败！";
					});
			}
		},
		mounted() {
			let _this = this;
			axios
				.get("/api/v1.0/house/get_house_del", {
					params: {
						house_id: _this.house_id
					}
				})
				.then(function(response) {
					if (response.data.errno == '0') {
						_this.house_del = response.data.data;
						_this.current_uid = response.data.current_user
						_this.is_collection = response.data.data.collections
						console.log(response.data);
					} else {
						console.log(response.data);
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});
		// }
		},
		beforeRouteLeave(to, from, next) {
			if (to.path == "/housing_list") {
				to.meta.keepAlive = true;
			} else {
				to.meta.keepAlive = false;
			}
			next();
		}
	}
</script>

<style scoped>
	.service-list {
		width: 100%;
		padding: 1% 0;
		/* 		height: 115px; */
	}

	.service-ties {
		width: 100%;
		padding: 1.5%;
	}

	.service-list ul li {
		float: left;
		width: 48%;
		font-size: 13px;
		color: #666666;
		margin-right: 4%;
		margin-top: 1%;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		white-space: nowrap;
	}

	.service-list ul li:nth-child(2n) {
		margin-right: 0;
	}

	.service-tit {
		font-size: .32rem;
		color: #666666;
	}

	.tit {
		width: 100%;
		padding: 5% 5% 3% 3%;
		position: absolute;
		bottom: 0;
		left: 0;
		background: linear-gradient(to bottom, #c0c4cc00, #0b101a5c) center no-repeat;
		background-size: cover;
		color: #FFFFFF;
	}

	.house_tit {
		width: 100%;
		padding-left: 3%;
		border-left: 8px solid #FF5252;
		color: #333333;
	}

	.service-ties ul li {
		width: 25%;
		margin-bottom: .3rem;
		float: left;
		font-size: .32rem;
		/* line-height: .6rem; */
		color: #555555;
		/* 对超出的文本进行隐藏 */
		overflow: hidden;
		/* text-overflow设为ellipsis时文本溢出内容就能显示为省略标记，而设为clip时就能把文本溢出的部分裁切掉 */
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		/* 设置文本不换行 */
		white-space: nowrap;
	}

	.service-ties ul li i {
		margin-right: .2rem;
		width: .5rem;
		font-size: .57rem;
		display: inline-block;
		float: left;
	}

	.list_item {
		/* 		max-height: 48px; */
		min-height: 48px !important;
		padding-left: 0;
	}

	p {
		text-indent: 2em;
		font-size: 13px;
		margin: 2%;
		color: #747577;
	}
</style>
<style>
	.el-dialog {
		border-radius: 10px !important;
	}
</style>
